<template>
  <div>
    <el-upload
        style="margin-top: 200px"
        class="upload-demo"
        drag
        action=""
        :http-request="fnUploadRequest"
        :before-upload="beforeAvatarUpload"
        multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">Drag the file here, or <em>Click on the upload</em></div>
      <div class="el-upload__tip" slot="tip">Only JPG/JPEG/PNG files can be uploaded and no more than 10MB</div>
    </el-upload>

    <el-carousel :interval="3000" type="card" height="600px" style="margin-top: 200px">
      <el-carousel-item v-for="item in imageList" :key="item">
        <el-image
            style="height: 100%"
            :src="item.image_path"
            fit="contain">
        </el-image>
      </el-carousel-item>
    </el-carousel>

  </div>
</template>
<script>
import OSS from 'ali-oss'
export default {

  name: 'VmUpload',
  data() {
    return {
      uploadForm: {
        image_name: "",
        image_path: "",
        image_size: 0
      },
      imageList: [
        {
          id: 0,
          image_name: "demo.png",
          image_path: "@/assets/log.png",
          image_size: "88.88K",
          type_name: "default",
          upload_time: "2000-02-22 00:00:00",
        }
      ],
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      const isJPG = (file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png');
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.FUN.errorMessage(this, "file type must be jpg/jpeg/png (" + file.type + ")");
      }
      if (!isLt2M) {
        this.FUN.errorMessage(this, "image can not be larger than 10MB");
      }
      return isJPG && isLt2M;
    },
    fnUploadRequest(option) {
      let file = option.file
      let name = file.name
      let size = file.size
      let date = new Date().getTime()
      let user_name = localStorage.getItem("user_name")
      let fileNames = `${user_name}/${date}-${name}`
      let store = new OSS(this.CONST.ossConfig);

      const _this = this
      store.multipartUpload(fileNames, file).then(result => {
            if (result) {
              _this.uploadForm.image_name = name
              _this.uploadForm.image_size = size
              _this.uploadForm.image_path = _this.CONST.imageBasePath + fileNames
              _this.axios.post(_this.API.http_image + 'insert', _this.uploadForm).then(function (resp) {
                if (resp.data) {
                  const respData = JSON.parse(JSON.stringify(resp.data))
                  if (respData.code === 200) {
                    _this.FUN.successMessage(_this, respData.message);
                  } else {
                    _this.FUN.errorMessage(_this, respData.message);
                  }
                } else {
                  return false;
                }

              })
            } else {
              return false;
            }
          }
      )
    },
    getImageList(){
      const _this = this;
      this.axios.get(_this.API.http_image + 'get_list',{params:{
          album_id : 0,
          current_page : 1,
          page_size : 10,
        }}).then(function (resp) {
            if (resp.data) {
              const respData = JSON.parse(JSON.stringify(resp.data))
              if (respData.code === 200) {
                _this.imageList = respData.data.list
              } else {
                _this.FUN.errorMessage(_this, respData.message);
              }
            } else {
              return false;
            }
          }
      );
    },
  },
  created() {
    this.getImageList()
  }
}
</script>

